<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useTianDiTu } from '@/hooks/map'
import { Feature, Map, View } from 'ol'
import { Point } from 'ol/geom'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Style, Circle as CircleStyle } from 'ol/style'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'



const xc = [114.86933826966052, 33.46835219138212]
const { createTitleLayer, key } = useTianDiTu()

let mapInstance: Map | null = null;
onMounted(() => {
    mapInstance = new Map({
        target: 'mapw',
        layers: [
            createTitleLayer('vec_w', key),
            createTitleLayer('cia_w', key),
        ],
        controls: [], // 不包含任何控制组件
        //视图
        view: new View({
            center: [113.75395, 34.76572],
            zoom: 8,
            projection: "EPSG:4326"
        })
    })
    console.log("test2");
    const test = new VectorLayer({
        source: new VectorSource({
            wrapX: false
        }),
        properties: {
            name: "TEST_POINT"
        }
    })
    mapInstance.addLayer(test)
    const pointFeature = new Feature({
        geometry: new Point([xc[0], xc[1]]), // 使用经纬度坐标创建点要素
        name: '散点1' // 添加其他属性到要素中
        ,title: "项城市"
    })
    pointFeature.setStyle(new Style({
        image: new CircleStyle({
            radius: 6, // 散点的半径
            fill: new Fill({
                color: 'red' // 散点的填充颜色
            }),
            stroke: new Stroke({
                color: 'white', // 散点的边框颜色
                width: 2 // 散点的边框宽度
            })
        })
    }))
    test.getSource()?.addFeature(pointFeature)
})


onBeforeUnmount(() => {
    if (mapInstance) {
        console.log('onBeforeUnmount - xiaohui-test2');
        mapInstance.setTarget(null);
        mapInstance.dispose()
        mapInstance = null;
      }
})


</script>
<template>
    <div id="containder">
        <div id="mapw" class="map-containder"></div>
    </div>
</template>
<style scoped>
.map-containder {
    position: relative;
    height: calc(100vh - 110px);
    width: 100%;
}

.control-list {
    position: absolute;
    right: 100px;
    bottom: 200px;
    height: 20vh;
    padding: 5px;
    width: 270px;
    background-color: rgba(138, 238, 238, 0.336);
    border-radius: 5px;
}

.btn-groups {
    margin-top: 5px;
}

.select-label {
    display: flex;
    justify-content: center;
}

.select-label>label {
    width: 120px;
    line-height: 34px;
}
</style>